Merge branch 'staging'

1 files changed, 111 insertions, 111 deletions

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 6c7186bc..aa5b7315 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -3,9 +3,9 @@
 import { useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import {
-	ResizablePanelGroup,
-	ResizablePanel,
-	ResizableHandle,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
 } from "../../../components/ui/resizable";
 import { MediaPanel } from "../../../components/editor/media-panel";
 import { PropertiesPanel } from "../../../components/editor/properties-panel";
@@ -19,127 +19,127 @@ import { usePlaybackControls } from "@/hooks/use-playback-controls";
 import { Onboarding } from "@/components/onboarding";
 
 export default function Editor() {
-	const {
-		toolsPanel,
-		previewPanel,
-		mainContent,
-		timeline,
-		setToolsPanel,
-		setPreviewPanel,
-		setMainContent,
-		setTimeline,
-		propertiesPanel,
-		setPropertiesPanel,
-	} = usePanelStore();
+  const {
+    toolsPanel,
+    previewPanel,
+    mainContent,
+    timeline,
+    setToolsPanel,
+    setPreviewPanel,
+    setMainContent,
+    setTimeline,
+    propertiesPanel,
+    setPropertiesPanel,
+  } = usePanelStore();
 
-	const { activeProject, loadProject, createNewProject } = useProjectStore();
-	const params = useParams();
-	const router = useRouter();
-	const projectId = params.project_id as string;
-	const handledProjectIds = useRef<Set<string>>(new Set());
-	const [isOnboardingOpen, setIsOnboardingOpen] = useState(true);
+  const { activeProject, loadProject, createNewProject } = useProjectStore();
+  const params = useParams();
+  const router = useRouter();
+  const projectId = params.project_id as string;
+  const handledProjectIds = useRef<Set<string>>(new Set());
+  const [isOnboardingOpen, setIsOnboardingOpen] = useState(true);
 
-	usePlaybackControls();
+  usePlaybackControls();
 
-	useEffect(() => {
-		const initProject = async () => {
-			if (!projectId) return;
+  useEffect(() => {
+    const initProject = async () => {
+      if (!projectId) return;
 
-			if (activeProject?.id === projectId) {
-				return;
-			}
+      if (activeProject?.id === projectId) {
+        return;
+      }
 
-			if (handledProjectIds.current.has(projectId)) {
-				return;
-			}
+      if (handledProjectIds.current.has(projectId)) {
+        return;
+      }
 
-			try {
-				await loadProject(projectId);
-			} catch (error) {
-				handledProjectIds.current.add(projectId);
+      try {
+        await loadProject(projectId);
+      } catch (error) {
+        handledProjectIds.current.add(projectId);
 
-				const newProjectId = await createNewProject("Untitled Project");
-				router.replace(`/editor/${newProjectId}`);
-				return;
-			}
-		};
+        const newProjectId = await createNewProject("Untitled Project");
+        router.replace(`/editor/${newProjectId}`);
+        return;
+      }
+    };
 
-		initProject();
-	}, [projectId, activeProject?.id, loadProject, createNewProject, router]);
+    initProject();
+  }, [projectId, activeProject?.id, loadProject, createNewProject, router]);
 
-	return (
-		<EditorProvider>
-			<div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
-				<EditorHeader />
-				<div className="flex-1 min-h-0 min-w-0">
-					<ResizablePanelGroup
-						direction="vertical"
-						className="h-full w-full gap-[0.18rem]"
-					>
-						<ResizablePanel
-							defaultSize={mainContent}
-							minSize={30}
-							maxSize={85}
-							onResize={setMainContent}
-							className="min-h-0"
-						>
-							{/* Main content area */}
-							<ResizablePanelGroup
-								direction="horizontal"
-								className="h-full w-full gap-[0.19rem] px-2"
-							>
-								{/* Tools Panel */}
-								<ResizablePanel
-									defaultSize={toolsPanel}
-									minSize={15}
-									maxSize={40}
-									onResize={setToolsPanel}
-									className="min-w-0"
-								>
-									<MediaPanel />
-								</ResizablePanel>
+  return (
+    <EditorProvider>
+      <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
+        <EditorHeader />
+        <div className="flex-1 min-h-0 min-w-0">
+          <ResizablePanelGroup
+            direction="vertical"
+            className="h-full w-full gap-[0.18rem]"
+          >
+            <ResizablePanel
+              defaultSize={mainContent}
+              minSize={30}
+              maxSize={85}
+              onResize={setMainContent}
+              className="min-h-0"
+            >
+              {/* Main content area */}
+              <ResizablePanelGroup
+                direction="horizontal"
+                className="h-full w-full gap-[0.19rem] px-2"
+              >
+                {/* Tools Panel */}
+                <ResizablePanel
+                  defaultSize={toolsPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setToolsPanel}
+                  className="min-w-0"
+                >
+                  <MediaPanel />
+                </ResizablePanel>
 
-								<ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-								{/* Preview Area */}
-								<ResizablePanel
-									defaultSize={previewPanel}
-									minSize={30}
-									onResize={setPreviewPanel}
-									className="min-w-0 min-h-0 flex-1"
-								>
-									<PreviewPanel />
-								</ResizablePanel>
+                {/* Preview Area */}
+                <ResizablePanel
+                  defaultSize={previewPanel}
+                  minSize={30}
+                  onResize={setPreviewPanel}
+                  className="min-w-0 min-h-0 flex-1"
+                >
+                  <PreviewPanel />
+                </ResizablePanel>
 
-								<ResizableHandle withHandle />
+                <ResizableHandle withHandle />
 
-								<ResizablePanel
-									defaultSize={propertiesPanel}
-									minSize={15}
-									maxSize={40}
-									onResize={setPropertiesPanel}
-									className="min-w-0"
-								>
-									<PropertiesPanel />
-								</ResizablePanel>
-							</ResizablePanelGroup>
-						</ResizablePanel>
+                <ResizablePanel
+                  defaultSize={propertiesPanel}
+                  minSize={15}
+                  maxSize={40}
+                  onResize={setPropertiesPanel}
+                  className="min-w-0"
+                >
+                  <PropertiesPanel />
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            </ResizablePanel>
 
-						<ResizableHandle withHandle />
+            <ResizableHandle withHandle />
 
-						{/* Timeline */}
-						<ResizablePanel
-							defaultSize={timeline}
-							minSize={15}
-							maxSize={70}
-							onResize={setTimeline}
-							className="min-h-0 px-2 pb-2"
-						>
-							<Timeline />
-						</ResizablePanel>
-					</ResizablePanelGroup>
-				</div>
-			</div>
-		</EditorProvider>
-	);
+            {/* Timeline */}
+            <ResizablePanel
+              defaultSize={timeline}
+              minSize={15}
+              maxSize={70}
+              onResize={setTimeline}
+              className="min-h-0 px-2 pb-2"
+            >
+              <Timeline />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </div>
+    </EditorProvider>
+  );
 }